<template>
  <div class="jianpanwarp">
    <header>
      <van-icon @click="back" size="25px" name="arrow-left" />
      <h3>电话</h3>
      <span></span>
    </header>
    <div class="center">
      <van-password-input
        :value="value"
        :mask="false"
        :length="11"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
        :border="0"
        :hide-on-click-outside="false"
      />
    </div>

   
      <div class="buttom" v-show="showKeyboard">
        <div class="top">
          <dl v-for="(item,index) in tops" :key="index">
            <dt>
              <van-icon size="25" :name="item.icon" @click="dx(item.icon)" />
            </dt>
            <dd>{{item.title}}</dd>
          </dl>
        </div>
        <van-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard = false" />
      </div>
      <a href="tel:400-0000-688">
        <button class="dianhua">电信|拨号</button>
      </a>
  

    <!-- 数字键盘 -->
    <!-- 
      
    <a >400-0000-688</a>
    <a href="sms:18688888888">发短信</a>
    -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      showKeyboard: true,
      tops: [
        {
          icon: "plus",
          title: "新建联系人"
        },
        {
          icon: "manager-o",
          title: "已有联系人"
        },
        {
          icon: "photograph",
          title: "视频联系"
        },
        {
          icon: "chat-o",
          title: "短信"
        }
      ]
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    dx(icon) {
      console.log(icon);
    }
  }
};
</script>

<style lang="less">
.jianpanwarp {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  header {
    background: rgb(1, 153, 241);
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    align-items: center;
  }
  .center {
    width: 100%;
    height: 50%;
    line-height: 20px;
    // border: 1px red solid;
    .van-password-input {
      margin-top: 70px;
      // border: 1px red solid;
    }
  }
  .buttom{
    width: 100%;
    height: 50%;

    .top {
      border: 1px red solid;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      dl {
        // align-items: center;
        text-align: center;
      }
    }
  }
  .dianhua {
    width: 30%;
    height: 50px;
    border: 0;
    border-radius: 30px;
    position: absolute;
    background: rgb(78, 207, 78);
    left: 50%;
    color: white;
    bottom: 12%;
    transform: translate(-50%, 0);
  }
}
</style>